<template>
  <div>
    <div style="width: 100%; height: 530px" class="swiper-lunbo">
      <!-- 轮播图 -->
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(item, index) in data" :key="index">
          <img :src="`http://127.0.0.1:7777/` + item.img" alt="" />
        </swiper-slide>
        <!-- 左右箭头 -->
        <div class="swiper-button-prev swiper-left" slot="button-prev"></div>
        <div class="swiper-button-next swiper-right" slot="button-next"></div>
        <!-- 页数指示点 -->
        <div class="swiper-pagination swiper-span" slot="pagination"></div>
      </swiper>
      <!-- 商品分类 -->
      <div class="category-box">
        <div class="category-item">
          <a href="#" class="left-item">
            <i class="left-item-icon"></i>
            全部分类
          </a>
        </div>
        <ul class="category-list">
          <li class="category-item category-item-dis1" id="abcde">
            <router-link to="/aqfh" class="left-item left-item-a"
              >家庭安防</router-link
            >
            <div class="shop-dis shop-dis1">
              <div class="shop-dis-list" clearfix>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/sheqiangji.webp" alt="" />
                  <span>摄像机</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/menling.webp" alt="" />
                  <span>门铃</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/chucunka.webp" alt="" />
                  <span>储存卡</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/yunluka.webp" alt="" />
                  <span>云录卡</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/peijian.webp" alt="" />
                  <span>配件</span>
                </div>
              </div>
            </div>
          </li>
          <li class="category-item category-item-dis2">
            <a href="#" class="left-item left-item-a">安全路由</a>
            <div class="shop-dis shop-dis2">
              <div class="shop-dis-list" clearfix>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/luyouqi.webp" alt="" />
                  <span>安全路由</span>
                </div>
              </div>
            </div>
          </li>
          <li class="category-item category-item-dis3">
            <a href="#" class="left-item left-item-a">智能手表</a>
            <div class="shop-dis shop-dis3">
              <div class="shop-dis-list" clearfix>
                <div class="shop-dis-list-item">
                  <img
                    src="../assets/img/shop-list/zhinengshoubiao.webp"
                    alt=""
                  />
                  <span>智能手表</span>
                </div>
                <div class="shop-dis-list-item">
                  <img
                    src="../assets/img/shop-list/shoubiaopeijian.webp"
                    alt=""
                  />
                  <span>配件</span>
                </div>
              </div>
            </div>
          </li>
          <li class="category-item category-item-dis4">
            <a href="#" class="left-item left-item-a">汽车用品</a>
            <div class="shop-dis shop-dis4">
              <div class="shop-dis-list" clearfix>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/jiluyi.webp" alt="" />
                  <span>记录仪</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/anquanzuoyi.webp" alt="" />
                  <span>安全座椅</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/taiyajiance.webp" alt="" />
                  <span>胎压监测</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/qichepeijian.webp" alt="" />
                  <span>配件</span>
                </div>
              </div>
            </div>
          </li>
          <li class="category-item category-item-dis5">
            <a href="#" class="left-item left-item-a">扫地机器人</a>
            <div class="shop-dis shop-dis5">
              <div class="shop-dis-list" clearfix>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/X95.webp" alt="" />
                  <span>X95礼盒版</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/C50.webp" alt="" />
                  <span>C50</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/X100.webp" alt="" />
                  <span>X100 MAX</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/F100.webp" alt="" />
                  <span>洗地机F100</span>
                </div>
              </div>
            </div>
          </li>
          <li class="category-item category-item-dis6">
            <a href="#" class="left-item left-item-a">影音生活</a>
            <div class="shop-dis shop-dis6">
              <div class="shop-dis-list" clearfix>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/wuxianerji.webp" alt="" />
                  <span>无限耳机</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/yundongerji.webp" alt="" />
                  <span>运动耳机</span>
                </div>
              </div>
            </div>
          </li>
          <li class="category-item category-item-dis7">
            <a href="#" class="left-item left-item-a">生态产品</a>
            <div class="shop-dis shop-dis7">
              <div class="shop-dis-list" clearfix>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/pinghengche.webp" alt="" />
                  <span>平衡车</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/shouxieban.webp" alt="" />
                  <span>手写板</span>
                </div>
                <div class="shop-dis-list-item">
                  <img src="../assets/img/shop-list/qita.webp" alt="" />
                  <span>其他</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 商品详细分类 -->
    </div>
    <div class="body-main">
      <div class="index-floor">
        <div class="mod-floor">
          <div class="floor-title">
            <span class="title">热门活动</span>
          </div>
          <div class="floor-body">
            <div class="floor-box">
              <a
                href="#"
                class="imd-admod-item hover-item"
                style="margin-left: 15px"
              >
                <img src="../assets/img/shouye-list/shexiangji.webp" alt="" />
              </a>
            </div>
            <div class="floor-box">
              <a href="#" class="imd-admod-item hover-item">
                <img src="../assets/img/shouye-list/qiangwangpai.webp" alt="" />
              </a>
            </div>
            <div class="floor-box">
              <a href="#" class="imd-admod-item hover-item">
                <img src="../assets/img/shouye-list/huishenghuo.webp" alt="" />
              </a>
            </div>
            <div class="floor-box">
              <a href="#" class="imd-admod-item hover-item">
                <img src="../assets/img/shouye-list/qiangxinpin.webp" alt="" />
              </a>
            </div>
          </div>
        </div>
        <div class="mod-floor">
          <img src="../assets/img/dachangtiao/remenhuodong.webp" alt="" />
        </div>
        <div class="mod-floor" v-for="(item, index) in data_index" :key="index">
          <div class="floor-title">
            <span class="title">{{ item.index_name }}</span>
            <a href="#" class="more-link">全部 >></a>
          </div>
          <div class="floor-body">
            <div class="floor-body-box clearfix">
              <a href="#" class="imd-admod-item hover-item">
                <img :src="`http://127.0.0.1:7777/` + item.index_pic" alt="" />
              </a>
              <a href="#" class="product-item" title="360可视门铃5Pro AR1C">
                <div class="item-img">
                  <img
                    :src="`http://127.0.0.1:7777/` + item.index_pic1"
                    alt=""
                  />
                </div>
                <p class="name">{{ item.title1 }}</p>
                <p class="desc" title="2K超清画质 166°超广视角">
                  {{ item.details1 }}
                </p>
                <p class="price">
                  <span class="cur-price">￥{{ item.price1 }}</span>
                </p>
              </a>
              <a href="#" class="product-item" title="360可视门铃5Pro AR1C">
                <div class="item-img">
                  <img
                    :src="`http://127.0.0.1:7777/` + item.index_pic2"
                    alt=""
                  />
                </div>
                <p class="name">{{ item.title2 }}</p>
                <p class="desc" title="2K超清画质 166°超广视角">
                  {{ item.details2 }}
                </p>
                <p class="price">
                  <span class="cur-price">￥{{ item.price2 }}</span>
                </p>
              </a>
              <a href="#" class="product-item" title="360可视门铃5Pro AR1C">
                <div class="top-label label-orange">新品</div>
                <div class="item-img">
                  <img
                    :src="`http://127.0.0.1:7777/` + item.index_pic3"
                    alt=""
                  />
                </div>
                <p class="name">{{ item.title3 }}</p>
                <p class="desc" title="2K超清画质 166°超广视角">
                  {{ item.details3 }}
                </p>
                <p class="price">
                  <span class="cur-price">￥{{ item.price3 }}</span>
                </p>
              </a>
              <a href="#" class="product-item" title="360可视门铃5Pro AR1C">
                <div class="item-img">
                  <img
                    :src="`http://127.0.0.1:7777/` + item.index_pic4"
                    alt=""
                  />
                </div>
                <p class="name">{{ item.title4 }}</p>
                <p class="desc" title="2K超清画质 166°超广视角">
                  {{ item.details4 }}
                </p>
                <p class="price">
                  <span class="cur-price">￥{{ item.price4 }}</span>
                </p>
              </a>
              <a href="#" class="product-item" title="360可视门铃5Pro AR1C">
                <div class="item-img">
                  <img
                    :src="`http://127.0.0.1:7777/` + item.index_pic5"
                    alt=""
                  />
                </div>
                <p class="name">{{ item.title5 }}</p>
                <p class="desc" title="2K超清画质 166°超广视角">
                  {{ item.details5 }}
                </p>
                <p class="price">
                  <span class="cur-price">￥{{ item.price5 }}</span>
                </p>
              </a>
              <a href="#" class="product-item" title="360可视门铃5Pro AR1C">
                <div class="top-label label-orange">新品</div>
                <div class="item-img">
                  <img
                    :src="`http://127.0.0.1:7777/` + item.index_pic6"
                    alt=""
                  />
                </div>
                <p class="name">{{ item.title6 }}</p>
                <p class="desc" title="2K超清画质 166°超广视角">
                  {{ item.details6 }}
                </p>
                <p class="price">
                  <span class="cur-price">￥{{ item.price6 }}</span>
                </p>
              </a>
            </div>
          </div>
          <div class="mod-floor">
            <img :src="`http://127.0.0.1:7777/` + item.index_long_pic" alt="" />
          </div>
        </div>
      </div>
      <div
        class="index-elevator-box show"
        v-show="scrollTop > 570"
        ref="index_elevator_pos"
      >
        <a
          href="#"
          :class="{
            elevator_item: true,
            elevator_item1: true,
            current: scrollTop >= 570 && scrollTop < 650,
          }"
        >
          <div class="elevator-item-text">热门活动</div>
        </a>
        <a
          href="#"
          :class="{
            elevator_item: true,
            elevator_item2: true,
            current: scrollTop >= 650 && scrollTop < 1150,
          }"
        >
          <div class="elevator-item-text">家庭安防</div>
        </a>
        <a
          href="#"
          :class="{
            elevator_item: true,
            elevator_item3: true,
            current: scrollTop >= 1150 && scrollTop < 2144,
          }"
        >
          <div class="elevator-item-text">安全路由</div>
        </a>
        <a
          href="#"
          :class="{
            elevator_item: true,
            elevator_item4: true,
            current: scrollTop >= 2144 && scrollTop < 3144,
          }"
        >
          <div class="elevator-item-text">行车安全</div>
        </a>
        <a
          href="#"
          :class="{
            elevator_item: true,
            elevator_item5: true,
            current: scrollTop >= 3144 && scrollTop < 4144,
          }"
        >
          <div class="elevator-item-text">扫地机器人</div>
        </a>
        <a
          href="#"
          :class="{
            elevator_item: true,
            elevator_item6: true,
            current: scrollTop >= 4144 && scrollTop < 5144,
          }"
        >
          <div class="elevator-item-text">智能守护</div>
        </a>
        <a
          href="#"
          :class="{
            elevator_item: true,
            elevator_item7: true,
            current: scrollTop >= 5144 && scrollTop < 6144,
          }"
        >
          <div class="elevator-item-text">生态互联</div>
        </a>
        <a
          href="#"
          :class="{
            elevator_item: true,
            elevator_item8: true,
            current: scrollTop >= 6144,
          }"
        >
          <div class="elevator-item-text">更多商品</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: true, //循环
        effect: "fade", //渐变
        autoplay: {
          delay: 2000, //动画时间间隔
          disableOnInteraction: false, //人为交互是否停止
        },
        // 关联 左右箭头按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 关联指示点 元素
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
      scrollTop: "",
      data: [],
      data_index: [],
      datashop: [],
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll)
    this.getLb()
    this.getIndex_pic()
    this.getshop()
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll)
  },
  methods: {
    handleScroll() {
      let scrllTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      this.scrollTop = scrllTop
      // console.log(this.scrollTop)
      if (scrllTop > 7084) {
        this.$refs.index_elevator_pos.style.position = "absolute"
        this.$refs.index_elevator_pos.style.top = "7124px"
      } else if (scrllTop <= 7151 && scrllTop >= 575) {
        this.$refs.index_elevator_pos.style.position = "fixed"
        this.$refs.index_elevator_pos.style.top = "50%"
      }
    },
    getLb() {
      this.axios.get("/laptap").then(res => {
        console.log(res)
        this.data = res.data.data
      })
    },
    getIndex_pic() {
      this.axios.get("/index_laptap").then(res => {
        this.data_index = res.data.data
      })
    },
    getshop() {
      this.axios.get("/laptapshop").then(res => {
        // console.log(res)
        // Object.assign(res.data.data1, res.data.data2)
        // console.log(res.data)
        // for (var i = 0; i < res.data.data1.length; i++) {
        //   // console.log(i)
        //   // console.log(res.data.data1[i])
        //   this.datashop[i] = [res.data.data1[i], res.data.data2[i]]
        // }
        console.log(this.datashop)
      })
    },
  },
}
// >=570 消失    6332  absolute
</script>
<style scoped src="../assets/css/index.css"></style>
